<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>连连看</title>
  <link rel="stylesheet" href="style/style.css">
</head>
<body>

<div id="chessboard">
  <div class="panel">
    总分：{{scoreTotal}} <br>
    连击：{{scoreAward/scoreSerial}} <br>
    奖励分：{{scoreAward}} <br>
    剩余时间： {{countDown}} <br>
    <button
      @click="resetGame"
    >重置</button>
    <br>
    <button
      @click="startGame"
    >开始游戏</button>
  </div>
  <div class="chess-container">
    <div class="tr"
      v-for="items in chess"
    >
      <div class="td"
        v-for="item in items"
        @click="click(item.type, item.position)"
        v-bind:class="item.className"
      >
        <div
          class="bg"
          v-bind:style="{ backgroundImage: 'url('+item.backgroundImage+')' }"
        ></div>
      </div>
    </div>
  </div>
</div>

<script src="script/utils.js"></script>
<script src="script/vue.js"></script>
<script src="script/jq.js"></script>
<script src="script/lian.js"></script>
<script src="script/main.js"></script>
</body>
</html>
